import React from 'react';
import { Affix, Pagination } from 'antd';

export const AxPagination: React.FC<any> = props => {
  const { pagination, showPagination = true, onChange } = props;
  /** 分页 */
  const paginationProps =
    pagination && showPagination
      ? {
          showSizeChanger: true,
          showQuickJumper: true,
          style: {
            marginTop: '5px',
            height: 32,
            float: 'right',
            backgroundColor: 'white',
          },
          showTotal: (total: number, range: any) =>
            `显示 ${range[0]}-${range[1]} 条，共 ${total} 条`,
          onChange: (current: number, pageSize: number) =>
            onChange({ current, pageSize }, null, null),
          onShowSizeChange: (current: number, pageSize: number) =>
            onChange({ current, pageSize }, null, null),
          ...pagination,
        }
      : false;
  /** 迷你分页 */
  const smallPaginationProps =
    pagination && showPagination
      ? {
          size: 'small',
          style: {
            marginTop: '5px',
            height: 32,
            float: 'right',
            backgroundColor: 'white',
          },
          onChange: (current: number, pageSize: number) =>
            onChange({ current, pageSize }, null, null),
          ...pagination,
        }
      : false;
  const page = showPagination === 'mini' ? smallPaginationProps : paginationProps;

  return (
    page && (
      <Affix offsetBottom={37}>
        <Pagination pageSizeOptions={['10', '20', '30', '40']} {...page} />
      </Affix>
    )
  );
};
